<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>voice</title>
<style>
    button{
        margin-top: 200px;
        margin-left: 50px;
        height: 100px;
        width: 150px;
    }
</style>
</head>
<body>

<script src="http://cdn.ronghub.com/swfobject-2.0.0.min.js"></script> 
<script src="lib/libamr-2.2.6.min.js"></script>	
<script src="./voice-2.2.6.js"></script>

<!-- 测试音频 -->
<script src="./voice-amr-base64.json"></script>

<div>
    <ul>
        <li>
            <button onclick="play()" class="play">播放</button> 
            <button onclick="pause()" class="pause">停止</button>
        </li>
    </ul>
</div>

<script type="text/javascript">
    RongIMVoice.init();

    function play(){
        RongIMVoice.Player.play(voice, {
            onbeforeplay: function(){ 
                console.log('onbeforeplay');
            },
            onplayed: function(){    
                console.log('onplayed');  
            },
            onended: function(){ 
                console.log('onended');
             }
         });    
     };

    function pause(){
        RongIMVoice.Player.pause();
    }
    
    // 在 iOS 的浏览器中第一次需要点击两次才能播放
    // 参考：https://segmentfault.com/a/1190000007864808 

    function touchPlay(){
        window.removeEventListener('touchstart', touchPlay, false);
        play();
    }
    
    var isiOS = (/i(Phone|P(o|a)d)/.test(navigator.userAgent));
    if(isiOS){
        window.addEventListener('touchstart', touchPlay, false);
    }

</script>

</body>
</html>
